<template>
  <view class="payment" @click='_handleComClick' :class='type == 3? "payment1":""'>
    <view class="way">{{paymentT.way}}</view>
    <view class="pay">{{paymentT.pay}}</view>
  </view>
</template>

<script>

  export default {
    props: {
      type: Number,
      _handleClick: Function
    },
    data() {
      return {}
    },
    computed: {
      paymentT() {
        const data = [
          {
            way: '报名',
            pay: '校区付款'
          },
          {},
          {
            way: '预定',
            pay: '校区付款'
          }
        ]
        return data[this.type - 1]
      }
    },
    created() {
      // console.log(this.type)
    },
    methods:{
      _handleComClick() {
        this._handleClick()
      }
    }
  }
</script>

<style scoped lang=scss>
  .payment {
    border: 1upx solid #ffa300;
    width: 140upx;
    height: 100upx;
    border-radius: 8upx;
    text-align: center;

    .way {
      background: #ffa300;
      color: #fff;
      line-height: 60 rpx;
    }

    .pay {
      color: #ffa300;
      line-height: 40upx;
      font-size: 10px;
    }
  }

  .payment1 {
    border: 1upx solid #0AAFFF;

    .way {
      background: #0AAFFF;
    }

    .pay {
      color: #0AAFFF;
      font-size: 10px;
    }
  }
</style>
